<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- SEO Meta标签 -->
    <title>IP地址分析结果 - {{ ip_data.query }} - IP地理位置查询</title>
    <meta name="description" content="{{ ip_data.query }}的IP地址分析结果，包括地理位置{{ ip_data.country }}{% if ip_data.regionName %}, {{ ip_data.regionName }}{% endif %}{% if ip_data.city %}, {{ ip_data.city }}{% endif %}、ISP提供商{{ ip_data.isp }}和时区等详细信息。">
    <meta name="keywords" content="IP地址分析,{{ ip_data.query }},IP地理位置,{{ ip_data.country }}{% if ip_data.regionName %},{{ ip_data.regionName }}{% endif %}{% if ip_data.city %},{{ ip_data.city }}{% endif %},ISP查询,IP归属地">
    <meta name="author" content="IP地址定位分析系统">
    <meta name="robots" content="index, follow">
    <meta name="revisit-after" content="7 days">
    
    <!-- Open Graph标签 -->
    <meta property="og:title" content="IP地址分析结果 - {{ ip_data.query }}">
    <meta property="og:description" content="{{ ip_data.query }}的IP地址分析结果，包括地理位置、ISP提供商和详细网络信息。">
    <meta property="og:type" content="website">
    <meta property="og:url" content="{{ request.build_absolute_uri }}">
    <meta property="og:site_name" content="IP地址定位分析系统">
    
    <!-- Twitter卡片 -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="IP地址分析结果 - {{ ip_data.query }}">
    <meta name="twitter:description" content="{{ ip_data.query }}的IP地址分析结果，包括地理位置、ISP提供商和详细网络信息。">
    
    <!-- Canonical标签 -->
    <link rel="canonical" href="{{ request.build_absolute_uri }}">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
            color: #333;
        }
        .container {
            max-width: 1400px;
            width: 90%;
            margin: 30px auto;
            background-color: white;
            padding: 40px;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        }
        h1 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 30px;
            font-size: 28px;
            font-weight: 700;
        }
        .result-header {
            text-align: center;
            margin-bottom: 40px;
            padding: 25px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 12px;
            color: white;
        }
        .ip-address {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 10px;
            letter-spacing: 1px;
            word-break: break-all;
        }
        .result-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        @media (min-width: 1200px) {
            .result-grid {
                grid-template-columns: repeat(4, 1fr);
                gap: 30px;
            }
        }
        
        @media (min-width: 768px) and (max-width: 1199px) {
            .result-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        .result-item {
            background-color: #f8f9fa;
            padding: 20px;
            border-radius: 12px;
            border-left: 5px solid #3498db;
            box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            min-height: 100px;
        }
        .result-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
        }
        .result-label {
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 8px;
            font-size: 16px;
        }
        .result-value {
            color: #34495e;
            font-size: 15px;
            line-height: 1.5;
            word-break: break-word;
        }
        .btn-back {
            display: block;
            width: 180px;
            margin: 30px auto 0;
            text-align: center;
            background: linear-gradient(135deg, #3498db, #2980b9);
            color: white;
            border: none;
            padding: 14px 20px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
        }
        .btn-back:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(52, 152, 219, 0.4);
        }
        .error {
            color: #e74c3c;
            background-color: #fee;
            padding: 10px;
            border-radius: 5px;
            margin-top: 15px;
        }
        .map-container {
            width: 100%;
            height: 400px;
            margin: 30px 0;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
            border: 1px solid #e0e0e0;
        }
        .map-container iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>IP地址分析结果</h1>
        
        <div class="result-header">
            <div class="ip-address">{{ ip_data.query }}</div>
        </div>
        
        {% if ip_data.status == 'success' %}
            <div class="result-grid">
                <div class="result-item">
                    <div class="result-label">国家/地区</div>
                    <div class="result-value">{{ ip_data.country }} ({{ ip_data.countryCode }})</div>
                </div>
                
                <div class="result-item">
                    <div class="result-label">地区/省</div>
                    <div class="result-value">{{ ip_data.regionName }} ({{ ip_data.region }})</div>
                </div>
                
                <div class="result-item">
                    <div class="result-label">城市</div>
                    <div class="result-value">{{ ip_data.city }}</div>
                </div>
                
                <div class="result-item">
                    <div class="result-label">邮政编码</div>
                    <div class="result-value">{{ ip_data.zip }}</div>
                </div>
                
                <div class="result-item">
                    <div class="result-label">地理位置</div>
                    <div class="result-value">{{ ip_data.lat }}, {{ ip_data.lon }}</div>
                </div>
                
                <div class="result-item">
                    <div class="result-label">时区</div>
                    <div class="result-value">{{ ip_data.timezone }}</div>
                </div>
                
                <div class="result-item">
                    <div class="result-label">ISP</div>
                    <div class="result-value">{{ ip_data.isp }}</div>
                </div>
                
                <div class="result-item">
                    <div class="result-label">AS</div>
                    <div class="result-value">{{ ip_data.as }}</div>
                </div>
            </div>
            
            <!-- 显示地图预览 -->
            {% if ip_data.lat and ip_data.lon %}
                <div class="map-container">
                    <iframe src="https://maps.google.com/maps?q={{ ip_data.lat }},{{ ip_data.lon }}&z=15&output=embed"></iframe>
                </div>
            {% endif %}
        {% else %}
            <div class="error">
                查询失败: {{ ip_data.message|default:'未知错误' }}
            </div>
        {% endif %}
        
        <a href="/" class="btn-back">返回重新查询</a>
    </div>
</div>

<footer style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; text-align: center; padding: 30px 15px; margin-top: auto; font-size: 14px; width: 100%;">
    <div style="max-width: 800px; margin: 0 auto;">
        <!-- <div style="display: flex; justify-content: center; gap: 30px; flex-wrap: wrap;">
            <div style="text-align: center; margin-bottom: 20px;">
                <div style="font-size: 24px; margin-bottom: 10px;">📁</div>
                <div style="font-weight: 600; margin-bottom: 8px; font-size: 15px;">最新源代码</div>
                <a href="https://gitee.com/yyping2019/ip-region-query.git" target="_blank" style="color: rgba(255,255,255,0.9); text-decoration: none; font-weight: 500; transition: all 0.3s ease;" 
                   onmouseover="this.style.color='white'; this.style.transform='translateY(-1px)';" 
                   onmouseout="this.style.color='rgba(255,255,255,0.9); this.style.transform='translateY(0);'">
                    Gitee仓库 →
                </a>
            </div>
            <div style="text-align: center;">
                <div style="font-size: 24px; margin-bottom: 10px;">👨‍💻</div>
                <div style="font-weight: 600; margin-bottom: 8px; font-size: 15px;">开发者联系</div>
                <a href="mailto:admin@ip997.com" style="color: rgba(255,255,255,0.9); text-decoration: none; font-weight: 500; transition: all 0.3s ease;"
                   onmouseover="this.style.color='white'; this.style.transform='translateY(-1px)';" 
                   onmouseout="this.style.color='rgba(255,255,255,0.9); this.style.transform='translateY(0);'">
                    admin@ip997.com
                </a>
            </div>
        </div> -->
        <div style="margin-top: 20px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.8); font-size: 12px;">
            © 2025 IP地址定位分析系统 | 基于Django开发
        </div>
    </div>
</footer>

<style>
    body {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }
    .container {
        flex: 1;
    }
    
    /* 响应式设计 */
    @media (max-width: 768px) {
        .container {
            padding: 25px;
            margin: 20px auto;
            width: 95%;
        }
        
        h1 {
            font-size: 24px;
            margin-bottom: 20px;
        }
        
        .result-header {
            padding: 20px;
        }
        
        .ip-address {
            font-size: 20px;
        }
        
        .result-grid {
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .result-item {
            padding: 15px;
            min-height: 90px;
        }
        
        .result-label {
            font-size: 14px;
        }
        
        .result-value {
            font-size: 14px;
        }
        
        .map-container {
            height: 300px;
            margin: 20px 0;
            border-radius: 12px;
        }
        
        .btn-back {
            width: 150px;
            padding: 12px 15px;
            font-size: 14px;
            margin: 20px auto 0;
        }
    }
    
    @media (max-width: 480px) {
        .container {
            padding: 20px;
            margin: 15px auto;
            border-radius: 12px;
        }
        
        h1 {
            font-size: 22px;
        }
        
        .result-grid {
            grid-template-columns: 1fr;
        }
        
        .map-container {
            height: 250px;
        }
        
        .ip-address {
            font-size: 18px;
        }
    }
</style>
</body>
</html>